<template>
    <view-box style="background:#F3F6F7;">
      <div style="height:10px;"></div>
      <div class="back-border-pos">
        <x-input class="lof" title="公司名：" v-model="addBasic.cname" name="school_name" placeholder="请输入公司名" ></x-input>
        <p style="width:92%;height:1px;margin-left:4%;background:#E6E6E6"></p>
        <x-address title="地址选择:" class="oungt" v-model="addressValue" raw-value :list="addressData" @on-shadow-change="onShadowChange" value-text-align="right" ></x-address>
        <p style="width:92%;height:1px;margin-left:4%;background:#E6E6E6"></p>
        <x-input class="lof" title="详细地址:" v-model="detailed_address" name="school_name" placeholder="请输入详细地址" ></x-input>
        <p style="width:92%;height:1px;margin-left:4%;background:#E6E6E6"></p>
        <x-input class="lof" title="联系电话：" v-model="addBasic.phone" name="school_name" placeholder="请输入联系电话" ></x-input>
      </div>
       <div style="height:20px;"></div>
      <div class="back-border-pos">
        <x-input class="lof" title="行业：" v-model="addBasic.hangye" name="school_name" placeholder="请输入行业" ></x-input>
      </div>
      <div style="height:20px;"></div>
      <div class="back-border-pos">
        <x-input title="性质：" class="lof" v-model="addBasic.xingzhi" name="school_name" placeholder="请输入性质" ></x-input>
      </div>
      <div style="height:20px;"></div>
      <div class="back-border-pos">
        <x-input title="公司规模：" class="lof" v-model="addBasic.renshu" name="school_name" placeholder="请输入公司规模" ></x-input>
      </div>
      <!-- <div style="height:20px;"></div>
      <div class="back-border-pos">
        <x-input title="公司福利：" class="lof" v-model="addBasic.motto" name="school_name" placeholder="请输入公司福利" ></x-input>
      </div> -->
      <div style="height:20px;"></div>
      <div class="back-border-pos">
          <p style="width:92%;margin-left:4%;height:40px;line-height:40px;color:#bababa;">公司简介:</p>
        <x-textarea :max="1000" style="color:#000;" placeholder="公司简介" v-model="addBasic.jianjie" :show-counter="false" :height="60" :rows="8" :cols="30"></x-textarea>
      </div>
      <div style="height:20px;"></div>
      <div class="back-border-pos">
          <div class="border-widtrh">
              <p class="left-width-cpp">公司logo</p>
              <p class="left-width-cpp1">
                <label style="width:100%;" for="uploads">
                <label for="uploads" style="text-align: center;width:60px;font-size:13px;" class="right-button-x">上传</label>
                <input id="uploads" style="display: none;" type="file" class="form-control" accept="image/*" @change="cameraChange" multiple>
                </label>
              </p>
          </div>
          <div style="height:20px;"></div>
          <div class="widh-img-up" style="justify-content: center;">
             <img class="imga-imgses" style="height:100px;width:100px;" :src="$apiUrl + '/storage/' + imgtupo" alt="">
          </div>
          <div style="height:20px;"></div>
      </div>
      <div style="height:20px;"></div>
      <div class="back-border-pos">
          <div class="border-widtrh">
              <p class="left-width-cpp">公司图片简介</p>
              <p class="left-width-cpp1">
                <!-- <x-button class="right-button-x">完成</x-button> -->
                <label class="right-button-x" v-if="imagesscs !== null" @click="deletec('image')" style="text-align: center;width:60px;font-size:13px;">清空</label>
              </p>
          </div>
          <div class="widh-img-up">
              <div class="width-up-images" v-for="(imgesa, index) in imagesscs" :key="index">
                  <img class="imga-imgses" :src="$apiUrl + '/storage/' + imgesa" alt="">
                  <div class="pos-dedate" style="display:none;">删除</div>
              </div>
              <div class="width-up-images" style="margin-left:10px;">
                <label for="uploadsss">
                <label for="uploadsss" style="width:60px;text-align: center;line-height:40px;" class="jiahao-cop"><i slot="icon" style="font-size: 19px;" class="iconfont icon-jia"></i></label>
                <input id="uploadsss" style="display: none;" type="file" class="form-control" accept="image/*" @change="cameraChangeous" multiple>
                </label>
              </div>
          </div>
      </div>
     <div style="height:20px;"></div>
     <div class="back-border-pos">
        <div class="border-widtrh">
            <p class="left-width-cpp">公司视频简介</p>
            <p class="left-width-cpp1" style="display: flex;justify-content: flex-end;">
                <x-button class="right-button-x" v-if="videos !== null" @click.native="deletec('video')" style="background:#8AB0B4;margin-top:5px;width:40%;font-size:13px;">删除</x-button>
               <label for="posyuc">
                <label for="posyuc" class="right-button-x" style="margin-top:5px;margin-left:5px;width:60px;font-size:13px;text-align: center;">上传</label>
                <input type="file" id="posyuc" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" capture="camcorder" @change="onFileChange" style="display: none;">
              </label>
            </p>
        </div>
        <div class="lef-gkle">
            <div class="pooswid-dio" v-if="videos !== null">
               <video :src="$apiUrl + videos" class="cosk" controls="controls">
               </video>
            </div>
            <div class="pooswid-dio1">
                <p style="font-size:14px;padding-left:10px;">
                    请不要上传大于50M的视频文件。
                </p>
            </div>
        </div>
     </div>
    <div style="height:20px;"></div>
     <div class="back-border-pos">
        <div class="border-widtrh">
            <p class="left-width-cpp">公司音频简介</p>
            <p class="left-width-cpp1" style="display: flex;justify-content: flex-end;">
                <x-button class="right-button-x" v-if="audios !== null" @click.native="deletec('music')" style="background:#8AB0B4;margin-top:5px;width:40%;font-size:13px;">删除</x-button>
                <label for="audioss">
                <label for="audioss" class="right-button-x" style="margin-top:5px;margin-left:5px;width:60px;font-size:13px;text-align: center;">上传</label>
                <input type="file" id="audioss" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" capture="camcorder" @change="onaviuChange" style="display: none;">
                </label>
            </p>
        </div>
        <div class="lef-gkle">
            <div class="pooswid-dio" v-if="audios !== null">
             <audio :src="$apiUrl + audios" class="cosk" controls="controls"></audio>
            </div>
            <div class="pooswid-dio1">
                <p style="font-size:14px;padding-left:10px;">
                    请不要上传大于10M的音频文件。
                </p>
            </div>
        </div>
     </div>
        <group style="width:92%;margin-left:4%;">
            <x-button style="background:#32B6C6;color:#fff;border:1px solid #32B6C6" @click.native="save()">保存</x-button>
        </group>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Group, Cell, CellBox, XHeader, CheckIcon, XTextarea, XInput, XAddress, ChinaAddressData, XButton, TabItem, Tab } from 'vux'
import VueCoreImageUpload from 'vue-core-image-upload'
export default {
  components: {
    'vue-core-image-upload': VueCoreImageUpload,
    ViewBox,
    Box,
    Flexbox,
    Group,
    Cell,
    CellBox,
    FlexboxItem,
    XHeader,
    CheckIcon,
    XTextarea,
    XInput,
    XAddress,
    XButton,
    TabItem,
    Tab
  },
  data () {
    return {
      labelPosition: false,
      addressData: ChinaAddressData,
      labelPosition1: false,
      addressValue: [],
      position: {},
      category: 2,
      indexlass: 2,
      detailed_address: '',
      addBasic: {
        cname: '',
        hangye: '',
        renshu: '',
        detailed_address: ''
      },
      videos: '',
      audios: '',
      imgtupo: '',
      imagesscs: [],
      show1: false,
      show2: true,
      data: {},
      company_image: ''
    }
  },
  mounted () {
    if (!this.$store.state.auth.userInfo) {
      this.$store.dispatch('getUserInfo')
    }
    this.myPrivac()
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    cameraChangeous (event) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/image',
      formdata1,
      config
      )
      .then(response => {
        console.log(response.data.thumb_img)
        this.imagesscs.push(response.data.thumb_img)
        console.log(this.imagesscs)
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    cameraChange (event) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/image',
      formdata1,
      config
      )
      .then(response => {
        // this.upload(response.data.thumb_img)
        this.imgtupo = response.data.thumb_img
        console.log(this.imgtupo)
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    imageuploaded (res) {
      if (res.errcode === 0) {
        console.log(res)
      }
    },
    onItemClick (plid) {
      console.log(plid)
      this.indexlass = plid
    },
    myPrivac () {
      this.$http.get('/companyInfo/?uid=' + this.userInfo.id + '&identity=' + '2').then(response => {
        if (response.data !== '') {
          this.addBasic = response.data
          this.addressValue = [this.addBasic.province, this.addBasic.city, this.addBasic.area]
          this.imagesscs = response.data.image ? response.data.image : null
          this.videos = response.data.video
          this.imgtupo = response.data.logo
          this.detailed_address = response.data.detailed_address ? response.data.detailed_address : ''
          this.audios = response.data.music
        }
      }).catch(error => {
        console.log(error)
      })
    },
    save () {
      console.log(this.addBasic.cname)
      let data = {
        uid: this.userInfo.id,
        logo: this.imgtupo,
        cname: this.addBasic.cname,
        hangye: this.addBasic.hangye,
        renshu: this.addBasic.renshu,
        xingzhi: this.addBasic.xingzhi,
        jianjie: this.addBasic.jianjie,
        province: this.addiss.province,
        city: this.addiss.city,
        area: this.addiss.area,
        detailed_address: this.detailed_address,
        phone: this.addBasic.phone,
        image: this.imagesscs,
        video: this.videos,
        music: this.audios
      }
      console.log(data)
      this.$http.post('/companyInfo/update', data).then(response => {
        this.$router.push({ path: '/corporate' })
        this.myPrivac()
      })
    },
    deletec (types) {
      this.$http.post('/company/flaunt/delete', {
        type: types
      }).then(response => {
        this.myPrivac()
      })
    },
    pudata () {
      this.show1 = true
      this.show2 = false
    },
    onShadowChange (ids, names) {
      this.addiss = {
        province: names[0],
        city: names[1],
        area: names[2]
      }
    },
    onFileChange: function (e) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/video',
      formdata1,
      config
      )
      .then(response => {
        // this.upload(response.data.thumb_img)
        this.videos = response.data.path
        console.log(this.imgtupo)
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    },
    onaviuChange: function (e) {
      var file = event.target.files[0]
      var formdata1 = new FormData()
      formdata1.append('file', file, file.name)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      if (file) {
        this.$vux.loading.show()
      }
      this.$http.post(
      '/upload/audio',
      formdata1,
      config
      )
      .then(response => {
        // this.upload(response.data.thumb_img)
        this.audios = response.data.path
        this.$vux.loading.hide()
      })
      .catch(e => {
        this.$vux.loading.hide()
      })
    }
  }
}
</script>

<style scoped>
    .btn-set-default {
        flex: 1;
        line-height: 50px;
    }
.xb-evali{
width:100%;
background: #fff;
height: 50px;
border-radius: 8px;
line-height: 50px !important;
display: flex;
align-items: center;
color: #bababa;font-size: 14px;
}
.xb-evali input[type="radio"]{display:none;}
.xb-evali input[type="radio"] + span{border:1px solid #CCCCCC;border-radius:20px;width:20px; height:20px; float:left; margin-top:0px;margin-right:10px;margin-left: 10px;}
.xb-evali input[type="radio"]:checked + span{border:1px solid #008AFF;border-radius:20px;background:url(./images/yi.png) no-repeat;background-size: 20px 20px;}
label{display: inline-block;line-height: normal}
.back-border-pos{
  background:#fff;
  width: 92%;
  margin-left: 4%;
  border-radius: 7px;
}
.border-widtrh{
    width: 92%;
    margin-left: 4%;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
}
.left-width-cpp{
    width: 50%;
    text-align: left;
    height: 50px;
    line-height: 50px;
}
.left-width-cpp1{
    width: 50%;
    text-align: right;
}
.right-button-x{
    width: 50%;
    height: 35px;
    background: #32B6C6;
    border-radius: 16px;
    color: #fff;
    line-height: 35px;
    margin-top: 8px;
    margin-right: inherit!important;
}
.widh-img-up{
    width: 94%;
    margin-left: 2%;
    display: flex;
    flex-wrap: wrap;
}
.width-up-images{
    width: 18%;
    margin-left: 2%;
    margin-top: 10px;
    position: relative;
}
.imga-imgses{
    width: 100%;
    border-radius: 8px;
}
.jiahao-cop{
    width: 100%;
    color: #32B6C6;
    font-size: 30px;
}
.pos-dedate{
    width: 98%;
    margin-left: 1%;
    height: 92%;
    margin-bottom: 4%;
    border-radius: 8px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    display: flex;
    font-size: 15px;
    color: #fff;
    align-items: center;
    top: 0px;
    left: 0px;
}
.lef-gkle{
    width: 92%;
    margin-left:4%;
    display: flex;
    padding-bottom: 10px;
}
.pooswid-dio{
    width: 50%;
    margin-top: 10px;
}
.pooswid-dio img{
    width: 100%;
    border-radius: 8px;
    height: 100px;
}
.cosk{
  width: 100%;
  border-radius: 16px;
  height: 100px;
}
.pooswid-dio1{
    width: 50%;
    display: flex;
    align-items: center;
}
</style>
<style>
 .weui-cells:before{
        border-top: 0px solid #D9D9D9 !important;
    }
    .weui-cells:after{
        border-bottom: 0px solid #D9D9D9 !important;
    }
.lof .weui-label {
    display: block;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
    color: #C0C2C3;
  }
  .weui-cell:before {
    border-top: 0px solid #D9D9D9!important;
}
.oungt .weui-label {
    display: block;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 16px !important;
    color: #bababa !important;
}
.vux-cell-box:not(:first-child):before {
  border-top: 0px solid #D9D9D9!important;
}
</style>